<template>
  <view class="no-data-page">
    <template v-if="[1, 2].includes(status)">
      <image class="no-data-ip" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/ip.png" />
      <text class="no-data-text">
        {{ infoText }}
      </text>
      <view class="no-data-btn" @click="handleClick">
        {{ btnText }}
      </view>
    </template>
    <template v-else-if="status === 0">
      <image class="no-data-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/img_noData.png" />
      <text class="no-data-text">
        暂无内容~
      </text>
    </template>
    <template v-else>
      <image class="no-data-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/img_no.png" />
      <text class="no-data-text">
        {{ status === 3 ? '您的VIP权益已到期！本月的课表无法查看，联系门店老师免费恢复权益！'
          : status === 4 ? 'VIP未生效，阅读课表无法查看，具体请联系门店老师了解！'
            : status === 7 ? 'VIP未开通，阅读课表无法查看，请联系门店老师免费开通VIP！'
              : status === 5 ? '您的VIP权益已到期！无法继续观看五商课程视频，联系门店老师免费恢复权益！'
                : status === 6 ? '开通VIP即可解锁托管记录，报名用户请联系门店老师免费领取VIP！' : '' }}
      </text>
    </template>

    <ContactTeacher v-model:show-overlay="showOverlay" :type="type" />
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  status: {
    type: Number,
    default: 0, // 0-无数据 1-未登录 2-未订阅 3-阅读vip过期 4-阅读vip未开通 5-托管vip过期 6-托管vip未开通 7-阅读vip未开通
  },
  infoText: {
    type: String,
    default: '暂未登录，登录后可查看',
  },
  btnText: {
    type: String,
    default: '登录',
  },
  type: {
    type: Number,
    default: 1, // 1-阅读 2-托管
  },
});

console.log('props', props.status);

const showOverlay = ref<boolean>(false);
const handleClick = () => {
  if (props.status === 1) {
    uni.navigateTo({
      url: '/pages/views/login/index',
    });
  }
  else if (props.status === 2) {
    showOverlay.value = true;
  }
};
</script>

<style lang="scss" scoped>
.no-data-page {
  height: 100%;
  padding: 0 40rpx 120px 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .no-data-ip {
    width: 400rpx;
    height: 270rpx;
  }

  .no-data-img {
    width: 400rpx;
    height: 240rpx;
  }

  .no-data-text {
    padding-top: 40rpx;
    padding-bottom: 80rpx;
    font-size: 30rpx;
    color: #888888;
    line-height: 45rpx;
    text-align: center;
  }

  .no-data-btn {
    width: 670rpx;
    height: 92rpx;
    background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
    box-shadow: inset 0 -4px 20px 0 #FFB085;
    border-radius: 46rpx;

    font-weight: bold;
    font-size: 32rpx;
    line-height: 92rpx;
    text-align: center;
    color: #FFFFFF;
  }
}
</style>
